---
title: "Snippet"
description: "Snippet is a component that can be used to display inline or multiline code snippets."
---

import {snippetContent} from "@/content/components/snippet";

# Snippet

Snippet is a component that can be used to display inline or multiline code snippets.

<ComponentLinks component="snippet" />

---

<CarbonAd/>

## Installation

<PackageManagers
  showGlobalInstallWarning
  commands={{
    cli: "npx heroui-cli@latest add snippet",
    npm: "npm install @heroui/snippet",
    yarn: "yarn add @heroui/snippet",
    pnpm: "pnpm add @heroui/snippet",
    bun: "bun add @heroui/snippet"
  }}
/>


## Import

<ImportTabs
  commands={{
    main: 'import {Snippet} from "@heroui/react";',
    individual: 'import {Snippet} from "@heroui/snippet";',
  }}
/>

## Usage

<CodeDemo title="Snippet" files={snippetContent.usage} />

### Sizes

<CodeDemo title="Sizes" files={snippetContent.sizes} />

### Colors

<CodeDemo title="Colors" files={snippetContent.colors} />

### Variants

<CodeDemo title="Variants" files={snippetContent.variants} />

### Custom Symbol

<CodeDemo title="Custom Symbol" files={snippetContent.symbol} />

### Without Copy

You can hide the copy button by setting the `hideCopyButton` property to `true`.

<CodeDemo title="Without Copy" files={snippetContent.withoutCopy} />

### Custom Tooltip

You can customize the tooltip by using the `tooltipProps` property.

<CodeDemo title="Custom Tooltip" highlightedLines="7-10" files={snippetContent.customTooltip} />

> **Note**: For more information about the `Tooltip` props, please visit the [Tooltip](/docs/components/tooltip) page.

### Multiline

<CodeDemo title="Multiline" files={snippetContent.multiline} />

### Custom Icons

You can customize the copy and copied icons by using the `copyIcon` and `checkIcon` properties.

<CodeDemo title="Custom Icons" highlightedLines="9-10" files={snippetContent.customIcons} />

## Slots

- **base**: The base slot of the snippet, it is the main container.
- **content**: This is the wrapper of the `<pre/>` slot.
- **pre**: The `<pre/>` slot of the snippet. It is used to wrap the code.
- **symbol**: The symbol wrapper slot.
- **copyButton**: The copy button slot.
- **copyIcon**: The copy icon slot.
- **checkIcon**: The check icon slot.

<Spacer y={4} />

## API

### Snippet Props

<APITable
  data={[
    {
      attribute: "children",
      type: "ReactNode | ReactNode[]",
      description: "The content of the snippet.",
      default: "-"
    },
    {
      attribute: "size", 
      type: "sm | md | lg",
      description: "The size of the snippet.",
      default: "md"
    },
    {
      attribute: "radius",
      type: "none | sm | md | lg",
      description: "The radius of the snippet.",
      default: "lg"
    },
    {
      attribute: "symbol",
      type: "string | ReactNode",
      description: "The symbol to show before the snippet.",
      default: "$"
    },
    {
      attribute: "timeout",
      type: "number",
      description: "The time in milliseconds to wait before resetting the clipboard.",
      default: "2000"
    },
    {
      attribute: "codeString",
      type: "string",
      description: "The code string to copy. if codeString is passed, it will be copied instead of the children.",
      default: "-"
    },
    {
      attribute: "tooltipProps",
      type: "TooltipProps",
      description: "The props of the tooltip.",
      default: "-"
    },
    {
      attribute: "copyIcon",
      type: "ReactNode",
      description: "The copy icon.",
      default: "-"
    },
    {
      attribute: "checkIcon",
      type: "ReactNode", 
      description: "The check icon.",
      default: "-"
    },
    {
      attribute: "disableTooltip",
      type: "boolean",
      description: "Whether to disable the tooltip.",
      default: "false"
    },
    {
      attribute: "disableCopy",
      type: "boolean",
      description: "Whether to disable the copy button.",
      default: "false"
    },
    {
      attribute: "hideCopyButton",
      type: "boolean",
      description: "Whether to hide the copy button.",
      default: "false"
    },
    {
      attribute: "hideSymbol",
      type: "boolean",
      description: "Whether to hide the symbol.",
      default: "false"
    },
    {
      attribute: "copyButtonProps",
      type: "ButtonProps",
      description: "The props of the copy button.",
      default: "-"
    },
    {
      attribute: "disableAnimation",
      type: "boolean",
      description: "Whether to disable the animations.",
      default: "false"
    },
    {
      attribute: "classNames",
      type: "Partial<Record<'base' | 'content' | 'pre' | 'symbol' | 'copyButton' | 'checkIcon', string>>",
      description: "Allows to set custom class names for the snippet slots.",
      default: "-"
    }
  ]}
/>

### Snippet Events

<APITable
  data={[
    {
      attribute: "onCopy",
      type: "(value: string | string[]) => void",
      description: "Handler that is called when the code is copied.",
      default: "-"
    }
  ]}
/>
